import Vue from 'vue'

const app = new Vue({
  // el: '#app',
  // template: '<div>{{text}}</div>',
  data: {
    text: 0
  },
  beforeCreate () {
    console.log('beforeCreate', this.$el)
  },
  created () {
    console.log('created', this.$el)
  },
  beforeMount () {
    console.log('beforeMount', this.$el)
  },
  mounted () {
    console.log('mounted', this.$el)
  },
  beforeUpdate () {
    console.log('beforeUpdate', this)
  },
  updated () {
    console.log('updated', this)
  },
  activated () { // 在组件章节讲解 keep alive
    console.log('activated', this)
  },
  deactivated () { // 在组件章节讲解
    console.log('deactivated', this)
  },
  beforeDestroy () {
    console.log('beforeDestroy', this)
  },
  destroyed () {
    console.log('destroyed', this)
  },
  // 如果写了template 会在beforeMount => mounted 之间自动调生产render函数
  // h => createElement
  render (h) {
    throw new TypeError('render error')
    // console.log('render function invoked')
    // return h('div', {}, this.text)
  },
  // 只有开发时 只会在本组件有效
  renderError (h, err) {
    return h('div', {}, err.stack)
  },
  // 使用方法和renderError相同
  errorCaptured () {
    // 会向上冒泡，并且正式环境可以使用
  }
})

// 1.普通 ：beforeCreate => created => beforeMount => mounted
// 2.不写el 或 app.$mount ： beforeCreate => created
app.$mount('#app')
// app.$mount('#root')
// setInterval(() => {
//   app.text = app.text += 1
// }, 1000)
// 3.销毁
// setTimeout(() => {
//   app.$destroy() // beforeDestroy => destroyed
// }, 1000)

// 4.注意在 beforeCreate => created 不能获取dom节点
//  生命周期 有哪些生命周期、生命周期调用顺序 调用契机、生命周期中的Vue实例有哪些区别
//  beforeCreate => created => beforeMount => mounted 一次性的 只会调用一次
//  beforeMount => mounted 在服务端渲染时不会调用的 服务端渲染调用只有 beforeCreate => created
//    因为：beforeMount => mounted 调用与dom操作有关，服务端渲染没有dom环境 也不会有内容
